<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手机 - 魅族官网</title>
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/goodsOrder.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1847150_2bpzp26qnk5.css">
    <script src='../js/require.js' async='true' defer data-main='../js/goodsOrder/main'></script>
</head>

<body>
    <!-- header -->
    <div class="header">
        <div class="w clearfix">
            <!-- logo -->
            <div class="logo fl">
                <a href="../index.html">
                    <h1>魅族</h1>
                    <img src="../images/index/header/logo.png" alt="">
                </a>
            </div>
            <!-- 流程 -->
            <ul class="step-list">
                <li class="step-list-on">购物车</li>
                <li>确认订单</li>
                <li>在线支付</li>
                <li>完成</li>
            </ul>
            <!-- 未登录 -->
            <ul class="user-list" id="unloginList">
                <li>
                    <a href="../html/goodsOrder.html">我的订单</a>
                </li>
                <li>
                    <a href="../html/login.html">登录</a>
                </li>
                <li>
                    <a href="../html/register.html">注册</a>
                </li>
            </ul>
            <!-- 登录 -->
            <ul class="user-list" id="userList">
                <li>
                    <a href="../html/goodsOrder.html">我的订单</a>
                </li>
                <li>
                    <a href="javascript:;"><span class="login-name" id="loginName"></span>的商城</a>
                </li>
            </ul>
        </div>
    </div>

    <!-- container -->
    <div class="container-wrap">
        <div class="container w">
            <!-- 全选 -->
            <table class="cart-header">
                <tbody>
                    <tr>
                        <td class="cart-select">
                            <div class="select-box">
                                <label for="selectAll">
                                    <!-- 选中时, 添加.checked样式 -->
                                    <div class="checkbox">
                                        <i class="iconfont icon-icon-test"></i>
                                    </div>
                                </label>
                                <input type="checkbox" id="selectAll">
                                <span>全选</span>
                            </div>
                        </td>
                        <td class="cart-price">
                            单价(元)
                        </td>
                        <td class="cart-number">
                            数量
                        </td>
                        <td class="cart-total">
                            小计(元)
                        </td>
                        <td class="cart-edit" id="cartEdit">
                            编辑
                        </td>
                        <td class="cart-Com" id="cartCom">
                            完成
                        </td>
                    </tr>
                </tbody>
            </table>
            <!-- 商品订单 -->
            <div class="cart-order">
                <!-- 头部 -->
                <div class="cart-order-header">
                    <div class="select-box">
                        <label for="selectAll">
                            <!-- 选中时, 添加.checked样式 -->
                            <div class="checkbox">
                                <i class="iconfont icon-icon-test"></i>
                            </div>
                        </label>
                        <span>魅族</span>
                    </div>
                    <span class="cart-free">已免运费</span>
                </div>
                <!-- 商品 -->
                <table class="cart-order-body" id="cartOrderBody">
                    <!-- <tr class="cart-goods" id="${item.id}">
                        <td class="cart-select">
                            <div class="select-box">
                                <label>
                                    <div class="itembox">
                                        <i class="iconfont icon-icon-test"></i>
                                    </div>
                                    <input type="checkbox" class="select">
                                </label>
                            </div>
                            <a href="javascript:;">
                                <img src="${item.imgUrl}" alt="">
                            </a>
                            <a href="javascript:;" class="cart-info">
                                <p class="cart-goods-name">${item.title}</p>
                                <p class="cart-goods-desc">${item.desc}</p>
                            </a>
                        </td>
                        <td class="cart-price">
                            <span>￥</span>
                            <span class="cart-price-txt">${item.price}</span>
                        </td>
                        <td class="cart-number">
                            <p class="cart-number-max">
                                限购1件
                            </p>
                            <div class="num-box">
                                <button class="num-sub disabled">-</button>
                                <div class="num-input">
                                    <input type="text" value="${item.num}">
                                </div>
                                <button class="num-add disabled">+</button>
                            </div>
                        </td>
                        <td class="cart-total">
                            <span>￥</span>
                            <span class="cart-total-txt">${item.num * item.price}</span>
                        </td>
                        <td class="cart-edit">
                            <span>--</span>
                            <em>x</em>
                        </td>
                    </tr> -->
                </table>
                <!-- 尾部 -->
                <div class="cart-order-footer clearfix">
                    <div class="cart-footer-left fl">
                        <div class="select-box">
                            <label for="selectAll">
                                <!-- 选中时, 添加.checked样式 -->
                                <div class="checkbox">
                                    <i class="iconfont icon-icon-test"></i>
                                </div>
                            </label>
                            <span>全选</span>
                            <a href="javascript:;" class="delete-all" id="deleteAll">删除选中的商品</a>
                            <p class="cart-footer-count">
                                共
                                <span class="cart-footer-count" id="allCount">0</span>
                                件商品，已选择
                                <span class="cart-footer-count blue" id="chooseCount">0</span>
                                件
                            </p>
                        </div>
                    </div>
                    <div class="cart-footer-right fr">
                        <span class="cart-footer-sum">
                            已优惠<span class="cart-footer-num red">0.00</span>元，
                            合计(不含运费)：<span class="cart-footer-total" id="cartFooterTotal">￥0.00</span>
                        </span>
                        <button class="to-order-btn">去结算</button>
                    </div>
                </div>
            </div>
            <!-- 商品 -->
            <div class="goods-wrap">
                <ul class="goods-list clearfix" id="goodsList">
                    <!-- <li>
                        <a href="javascript:;">
                            <img src="../images/goodsList/item.jpg" alt="">
                            <ul class="item-color"></ul>
                            <h3 class="item-title">魅族 17 Pro</h3>
                            <p class="item-desc">
                                【预购加赠HIFI解码耳放】【6.1发货】mSmart 5G 快省稳系统方案 | 高通骁龙 865 + UFS 3.1 + LPDDR5 | 6400W 全场景 AR 专业影像系统  27W 无线超充 + 4500mAh 超大电池
                            </p>
                            <p class="item-price">
                                <em>￥</em>
                                <span>4299</span>
                            </p>
                            <button id="0" class="add-cart">加入购物车</button>
                        </a>
                    </li> -->
                </ul>
            </div>
        </div>
    </div>

    <!-- footer -->
    <div class="footer">
        <div class="footer-link w clearfix">
            <!-- 左 -->
            <ul class="footer-list">
                <li>
                    <a href="javascript:;">
                        <img src="../images/index/footer/f1.png" alt="">
                        <span>满80免运费</span>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="../images/index/footer/f2.png" alt="">
                        <span>100+ 城市次日送达</span>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="../images/index/footer/f3.png" alt="">
                        <span>7天无理由退货</span>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="../images/index/footer/f4.png" alt="">
                        <span>15天换货保障</span>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="../images/index/footer/f5.png" alt="">
                        <span>1年免费保修</span>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="../images/index/footer/f6.png" alt="">
                        <span>上门快修</span>
                    </a>
                </li>
            </ul>
            <!-- 右 -->
            <div class="footer-hotline">
                <span>周一至周日 8:00-20:00</span>
                <p class="tel">400-788-3333</p>
                <a href="javascript:;">在线客服</a>
            </div>
            <hr class="footer-hr">
            <!-- 下 -->
            <div class="footer-bot">
                <div class="foot-bot-l">
                    <ul class="clearfix">
                        <li>
                            <a href="javascript:;">了解魅族</a>
                        </li>
                        <li>
                            <a href="javascript:;">加入我们</a>
                        </li>
                        <li>
                            <a href="javascript:;">联系我们</a>
                        </li>
                        <li>
                            <a href="javascript:;">Flyme</a>
                        </li>
                        <li>
                            <a href="javascript:;">魅族社区</a>
                        </li>
                        <li>
                            <a href="javascript:;">天猫旗舰店</a>
                        </li>
                        <li>
                            <a href="javascript:;">问题反馈</a>
                        </li>
                        <li>
                            <a href="javascript:;">线上销售授权名单公示</a>
                        </li>
                        <li>
                            <a href="javascript:;">出版物经营许可证</a>
                        </li>
                        <li class="lang no-border" id="lang">
                            <a href="javascript:;" id="langA">
                                <i class="lang-icon"></i>
                                简体中文
                            </a>
                            <div class="lang-sub" id="langSub">
                                <ul id="langSubList">
                                    <li>
                                        <a href="javascript:;">
                                            <i class="lang1"></i>
                                            <span>简体中文</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;">
                                            <i class="lang2"></i>
                                            <span>繁體中文</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;">
                                            <i class="lang3"></i>
                                            <span>English</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;">
                                            <i class="lang4"></i>
                                            <span>Русский</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;">
                                            <i class="lang5"></i>
                                            <span>Türkiye</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                    <p class="foot-bot-l-b">
                        ©2019 Meizu Telecom Equipment Co., Ltd. All rights reserved.
                        <a href="javascript:;">粤ICP备13003602号</a>
                        <a href="javascript:;">合字B2-20170010 </a>
                        <a href="javascript:;">营业执照</a>
                        <a href="javascript:;">法律声明</a>
                        <span class="record">
                            <i></i>
                            粤公网安备 44049102496009 号
                        </span>
                        <a href="javascript:;" class="f-icon1">
                            <i></i>
                        </a>
                        <a href="javascript:;" class="f-icon2">
                            <i></i>
                        </a>
                        <a href="javascript:;" class="f-icon3">
                            <i></i>
                        </a>
                    </p>
                </div>
                <div class="foot-bot-r">
                    <a href="javascript:;" id="applet">
                        <img src="../images/index/footer/applet.png" alt="">
                        <i class="share share1" id="share1"></i>
                    </a>
                    <a href="javascript:;" id="qrcode">
                        <img src="../images/index/footer/qrcode.jpg" alt="">
                        <i class="share share2"></i>
                    </a>
                    <a href="javascript:;">
                        <i class="share share3"></i>
                    </a>
                    <a href="javascript:;">
                        <i class="share share4"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</body>

</html>